import 'package:flutter/material.dart';
import 'package:flutter_app/views/new_roure.dart';
import 'package:flutter_app/views/web_view_page.dart';
import 'package:flutter_app/widgets/list_view_item.dart';
import 'package:logging/logging.dart';

import 'package:css_colors/css_colors.dart';

// 根组件，继承至 StatelessWidget，无状态组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  // 最终渲染的页面
  // 在程序运行的时候调用一次，build描述UI界面
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      // 返回一个 myHomePage widget
      home: const MyHomePage(title: 'Demo Page'),
    );
  }
}

// 主要渲染组件，state类，StatefulWidget 有状态组件
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// 详细状态
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 88;

  // int _tempCounter = 0; // 运用更新数据

  // 方法
  void _incrementCounter() {
    // 通过setState来修改数据
    setState(() {
      _counter--;
    });
  }

  @override
  // 使用Build描述UI界面
  Widget build(BuildContext context) {
    // 这个方法在每次调用setState时重新运行，
    // 例如像上面的_incrementCounter方法一样。
    // Flutter框架已经被优化，使重复运行构建方法变得快速，这样你就可以仅仅重新构建需要更新的东西，而不必单独更改小部件的实例。
    // Scaffold 功能是构建一个具有基本导航功能的页面布局
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '点击后的次数: 这是一个新的flutter APP',
            ),
            Text(
              '$_counter',
              style: Theme
                  .of(context)
                  .textTheme
                  .headlineMedium,
            ),
            ElevatedButton(
                onPressed: () {
                  Logger('打印一段文字 哈哈哈');

                  // 修改动态的数据
                  setState(() {
                    _counter += 5;
                  });
                },
                child: const Text('测试按钮')),
            TextButton(
                onPressed: () {
                  Logger('路由跳转到 NewRoute 页面中');
                  //  导航到新路由
                  Navigator.push(context, MaterialPageRoute(builder: (context) {
                    return const NewRoute();
                  }));
                },
                child: const Text('跳转路由')),
            ElevatedButton(
                style: const ButtonStyle(
                    backgroundColor:
                    MaterialStatePropertyAll<Color>(Colors.greenAccent)),
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) {
                    return const WebViewPage();
                  }));
                },
                child: const Text('home 页面跳转')),
            // Expanded 填充剩余的空间
            Expanded(
                child: ListView.builder(
                    itemBuilder: (context, index) {
                      // return const Text('item listview');
                      return _listItem();
                    },
                    itemCount: 20))
          ],
        ),
      ),
      // body: ListView(),
      // 一个普通按钮

      // 右下角浮动按钮
      // floatingActionButton: FloatingActionButton(
      //   onPressed: _incrementCounter,
      //   tooltip: 'Increment',
      //   child: const Icon(Icons.add),
      // ),
    );
  }

  // 列表的卡片的样式
  Widget _listItem() {
    // 点击事件 GestureDetector InkWell
    return InkWell(onTap: () => {
      Navigator.push(context, MaterialPageRoute(builder: (context){
        return WebViewPage(title: 'hh1', value: 121,);
      }))
    }, child: Container(
      margin: EdgeInsets.only(top: 5, bottom: 5, left: 10, right: 10),
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 1),
          borderRadius: BorderRadius.all(Radius.circular(12))),
      child: Column(
        children: [
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.network(
                  'https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0',
                  width: 40,
                  height: 40,
                  fit: BoxFit.fill,
                ),
              ),
              const Padding(
                  padding: EdgeInsets.only(right: 8), child: Text(' ')),
              const Text(
                "作者",
                style:
                TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
              ),
              const Expanded(child: SizedBox()),
              const Padding(
                  padding: EdgeInsets.only(right: 8),
                  child: Text("2024-08-20 17:40")),
              const Text("测试")
            ],
          ),
          const Padding(padding: EdgeInsets.only(top: 4)),
          const Text(
            '标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题-标题',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
          const Padding(padding: EdgeInsets.only(top: 16)),
          Row(
            children: [
              const Text('资源'),
              const Expanded(child: SizedBox()),
              Image.network(
                  'https://ts1.cn.mm.bing.net/th/id/R-C.a63458098df06b590b1b622b67e6ba23?rik=dIDMkKTJ7FCSWQ&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2021%2f03-08%2f97794%2fwater_97794_698_634.31_.png&ehk=YJQ8g2qyEk3vR6e9XW6S9%2b7S6a%2bPrmusBP9SCsVj93Q%3d&risl=&pid=ImgRaw&r=0',
                  width: 20,
                  height: 20)
            ],
          )
        ],
      ),
    ));
  }
}
